﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        body {
           font-size:16px;
            font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif, Helvetica, Microsoft Yahei;
        }

        .font-property {
            font: bold 16pt/20px  Microsoft Yahei;
        }

        .box {
            color: red;
        }

            .box h1 {
                color: #00ff00;
            }

            .box p.ex {
                color: rgb(0,0,255);
            }

            .box p.ra {
                color: rgba(125,10,45,0.5);
            }
    </style>
</head>
<body>
    <fieldset>
        <legend>字体</legend>
        <div>
            <p>天行健，君子以自强不息</p>
            <p>地势坤，君子以厚德载物</p>
        </div>
    </fieldset>
    <fieldset>
        <legend>字号</legend>
        <div>
            <p style="font-size:10pt">欲穷千里目，更上一层楼(10pt)</p>
            <p style="font-size:25pt">欲穷千里目，更上一层楼(20pt)</p>
            <p style="font-size:x-small">欲穷千里目，更上一层楼(x-small)</p>
            <p style="font-size:small">欲穷千里目，更上一层楼(small)</p>
            <p style="font-size:large">欲穷千里目，更上一层楼(large)</p>
            <p style="font-size:x-large">欲穷千里目，更上一层楼(x-large)</p>
            <p style="font-size:smaller">欲穷千里目，更上一层楼(smaller)</p>
            <p>天行健，君子以自强不息</p>
            <p style="font-size:larger">欲穷千里目，更上一层楼(larger)</p>
            <p style="font-size:50%">欲穷千里目，更上一层楼(50%)</p>
        </div>
    </fieldset>
    <fieldset>
        <legend>字体风格</legend>
        <div>
            <p style="font-style:italic">梅花香自苦寒来</p>
            <p style="font-style:normal">梅花香自苦寒来</p>
            <p style="font-style:oblique">梅花香自苦寒来</p>
        </div>
    </fieldset>
    <fieldset>
        <legend>加粗字体</legend>
        <div>
            <p style="font-weight:bold">梅花香自苦寒来(bold)</p>
            <p style="font-weight:bolder">梅花香自苦寒来(bolder)</p>
            <p style="font-weight:lighter">梅花香自苦寒来(lighter)</p>
            <p style="font-weight:normal">梅花香自苦寒来(normal)</p>
            <p style="font-weight:100">梅花香自苦寒来(100)</p>
            <p style="font-weight:400">梅花香自苦寒来(400)</p>
            <p style="font-weight:900">梅花香自苦寒来(900)</p>
        </div>
    </fieldset>
    <fieldset>
        <legend>将小写字母转为大写</legend>
        <div>
            <p style="font-variant:normal">Happy Birthday to You</p>
            <p style="font-variant:small-caps">Happy Birthday to You</p>
        </div>
    </fieldset>
    <fieldset>
        <legend>font复合属性</legend>
        <div>
            <p class="font-property">众里寻他千百度，蓦然回首，那人却在灯火阑珊处。</p>
        </div>
    </fieldset>
    <fieldset>
        <legend>字体颜色</legend>
        <div class="box">
            <h1>《青玉案 元夕》</h1>
            <p>
                众里寻他千百度，蓦然回首，那人却在灯火阑珊处。
            </p>
            <p class="ex">众里寻他千百度，蓦然回首，那人却在灯火阑珊处。（该段落定义了 class="ex"。该段落中的文本是蓝色的。）</p>
            <p class="ra">众里寻他千百度，蓦然回首，那人却在灯火阑珊处。（此处使用了CSS3中的新增加的RGBA函数，构建颜色。）</p>
        </div>
    </fieldset>
</body>
</html>
